<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" label-width="110px" label-suffix=":">
            <el-form-item label="1688商品链接" prop="url">
                <el-input v-model.trim="model.url" placeholder="请填写/粘贴1688商品链接" clearable style="width: 100%">
                    <template slot="append"><el-button type="primary" @click="searchProduct" style="background: #11a983; color: #fff">获取1688商品</el-button></template>
                </el-input>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border script>
            <el-table-column label="图片" min-width="100">
                <template slot-scope="scope">
                    <ImageUploadImg v-model="scope.row['1688_product_image']" :readOnly="true"></ImageUploadImg>
                </template>
            </el-table-column>
            <el-table-column label="名称" min-width="250" prop="1688_product_name"></el-table-column>
            <el-table-column label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-radio-group v-model="model.specId">
                        <el-radio v-for="item in scope.row.skuList" :label="item.specId" :key="item.specId">{{ `颜色：${item.varient_colour} 尺码：${item.varient_size}` }}</el-radio>
                    </el-radio-group>
                </template>
            </el-table-column>
        </el-table>

        <div slot="footer" class="dialo2-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { get_1688_one, addPlanSku } from '@/api/purchase'
export default {
    name: 'SingleAddDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            isIndeterminate: false,
            checkAll: false,
            tableData: [],
            skuList: [],
            model: {
                url: '',
                id: '',
                specId: '',
            },
            rules: {},

            save: false,
            loading: false,
        }
    },
    computed: {
        title() {
            return `建立1688配对关系`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {},
    mounted() {},
    methods: {
        searchProduct() {
            if (!this.model.url) {
                return this.$message.error('1688商品链接不能为空')
            }
            const params = { url: this.model.url }
            get_1688_one(params)
                .then(res => {
                    this.tableData = []
                    if (res.data.length > 0) {
                        const info = res.data[0]
                        const productInfo = {}
                        productInfo['1688_product_id'] = info['1688_product_id']
                        productInfo['1688_product_name'] = info['1688_product_name']
                        productInfo['1688_product_image'] = info['1688_product_image']
                        productInfo.skuList = res.data
                        this.skuList = productInfo.skuList
                        this.tableData.push(productInfo)
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            if (!this.model.url) {
                return this.$message.error('1688商品链接不能为空')
            }
            if (this.model.specId.length == 0) {
                return this.$message.error('请选择产品sku')
            }
            this.save = true
            const params = { ...this.model, id: this.params.id }
            addPlanSku(params)
                .then(() => {
                    this.$message.success('操作成功')
                    this.$emit('success', true)
                    this.cancel()
                })
                .finally(() => {
                    this.save = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.color-list {
    display: flex;
    align-items: center;
    height: 36px;
}
.color-item {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #fff;
}
</style>
